<template>
  <div class="home">
    <div class="btn">
      <el-button type="primary" @click="search">搜索</el-button>
      <el-button type="primary" @click="add">添加</el-button>
      <span>总收益：{{totalDgr || 0 }}</span>
    </div>

    <div class="flex">
      <div class="flex1">
        <span class="span-width">开始日期</span>
        <el-date-picker
          v-model="startDate"
          type="date"
          placeholder="选择日期">
        </el-date-picker>
      </div>
      <div class="flex1">
        <span class="span-width">结束日期</span>
        <el-date-picker
          v-model="endDate"
          type="date"
          placeholder="选择日期">
        </el-date-picker>
      </div>
      <div class="flex1"></div>
    </div>

    <div v-for="(item, index) in lists" :key="index" class="flex mt10">
      <div class="flex1">
        <span class="span-width">基金代码</span>
        <el-input v-model="item.fcode" placeholder="请输入基金代码" class="input"></el-input>
      </div>
      <div class="flex1">
        <span class="span-width">所占比例</span>
        <el-input v-model="item.ratio" placeholder="请输入所占比例" class="input">
          <template slot="suffix">
            <span class="percent">%</span>
          </template>
        </el-input>
      </div>
      <div class="flex1">
        <el-button type="primary" @click="deleteItem(index)">删除</el-button>
        <span>收益:{{item.revenue}}</span>
      </div>
    </div>

  </div>
</template>

<script>
  import moment from 'moment'
  export default {
    name: 'Home',
    data() {
      return {
        startDate: null,
        endDate: null,
        lists: [
          {fcode: null, ratio: null, revenue: null},
        ],
        totalDgr: null,
      }
    },
    comments: {
      moment
    },
    created() {
    },
    methods: {
      search() {
        if (!this.startDate || !this.endDate) return false;
        if (this.lists.some(v => !v.fcode || !v.ratio)) return false;
        const params = {
          startDate: moment(this.startDate).format('YYYY-MM-DD'),
          endDate: moment(this.endDate).format('YYYY-MM-DD'),
          lists: this.lists
        }
        const api = '/calculateAvgRate';
        this.axios.post(api, params).then((response) => {
          console.log(response.data)
        }).catch(err => {
          console.log(err)
        })
      },
      add() {
        if (this.lists.length >= 10) return false;
        this.lists.push({
          fcode: null, ratio: null
        })
      },
      deleteItem(index){
        this.lists.splice(index, 1);
      }
    }
  }
</script>

<style scoped>
  .home {
    padding: 0 20px;
  }
  .home .flex {
    display: flex;
  }

  .flex1 {
    flex: 1;
  }

  .input {
    width: 220px;
  }
  .btn {
    padding: 20px 0;
  }
  .span-width {
    width: 100px;
    text-align: left;
    display: inline-block;
  }
  .mt10 {
    margin-top: 10px;
  }
  .percent {
    display: inline-block;
    transform: translateY(12px);
  }
</style>
